<template>
    <div class="bindcode-page">
        <back :back="$route.query.to != 'login'"  title="绑定邀请码"></back>
        <div class="bindcode-content">
            <div class="bindcode-form">
                <span>{{Inviter.code?'已绑定邀请码' : '请输入邀请码'}}:</span>
                <input class="input" type="text" v-model.trim="bindcode" placeholder="请输入邀请码">
            </div>
            <div class="intro">邀请码填写过后不允许修改，请确认填写正确之后点击保存</div>
            <div class="intro" v-if="$route.query.to == 'login'">没有邀请码<router-link to="/">忽略</router-link></div>
            <button type="button" class="submit" v-if="!Inviter.code"  @click="updateInviter">提交</button>
        </div>
    </div>
</template>

<style lang="stylus">
.bindcode-page{
    padding-top 50px
    height 100%
    .bindcode-content{
        text-align left
        padding 10px
        .bindcode-form{
            display flex
            align-items center
            height 50px
            border-bottom 1px solid rgba(255,255,255,0.1)
            span {
                font-size 14px
                color #333
                min-width 90px
            }
            .input{
                width 60%
                height 40px
                border 1px solid #ddd
                background transparent
                color #333
                font-size 14px
                outline none
                line-height 40px
                padding 0 10px
                border-radius 5px
            }
        }
        .intro{
            font-size 12px
            color rgb(139,140,145)
            padding 5px 0
            a{
                color #322be9
                text-decoration underline
            }
        }
        .submit{
            display block
            width 225px
            height 44px
            background-image  linear-gradient(to top, #322be9, #5677fd)
            color #ffffff
            border-radius 5px
            font-size 14px
            border 0
            outline none 
            margin 50px auto
        }
    }
}
</style>

<script>
export default {
    data(){
        return{
            bindcode:'',
            Inviter:'',
            typeback:false,
        }
    },
    created(){
        this.getMyInviteCode();
    },
    methods:{
        getMyInviteCode(){
            this.$http.get(`/Invite/getMyInviter`).then( res => {
                console.log(res)
                if(res.code == 200){
                    this.Inviter = res.data
                    if(this.Inviter.code){
                        this.bindcode = this.Inviter.code
                    }
                }
            })
        },
        updateInviter(){
            this.$http.get(`/Invite/updateInviter`,{
                inviteCode:this.bindcode
            }).then( res => {
                console.log(res)
                if(res.code == 200){
                    let toast = this.$createToast({
                        time: 2000,
                        txt: '绑定成功',
                        type:'correct'
                    })
                    toast.show()
                }else{
                    let toast = this.$createToast({
                        time: 2000,
                        txt: res.msg,
                        type:'error'
                    })
                    toast.show()
                }
            })
        },
    }
}
</script>
